<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile - DateBox Demos</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" /> 
	
	<!-- NOTE: Script load order is significant! -->
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
	
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/demos/extras.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
	<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
	<script type="text/javascript">
		$('div').live('pagecreate', function() {
			prettyPrint()
		});
	</script>
	
</head>
<body>
<div data-role="page" id="timeIndex"> 
	<div data-role="header" data-position="fixed"> 
		<h1>jQueryMobile - DateBox</h1>
		<a href="../../" data-icon="home" data-iconpos="notext">Home</a>
	</div>
	<div data-role="content">
		<div class="content-secondary"> 
			<div id="jqm-homeheader"> 
				<h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework :: DateBox" /></h1> 
				<p>A Date and Time Picker plugin for jQueryMobile</p> 
			</div> 
			
			<div class="scriptdemos sidebar"></div>
		</div>
		
		<div class="content-primary"> 
			<div data-role="collapsible-set" data-mini="true">
			
				<div data-role="collapsible" data-collapsed="false"> 
					<h2>Linked w/ Select</h2>
					<p>The date input controls what is in the select box.</p>
					<div data-role="fieldcontain">
						<label for="datetime">Date</label>
						<input data-options='{"mode":"calbox","overrideDateFormat":"%Y-%m-%d", "defaultValue":[2001,0,1], "calHighPicked":false, "calHighToday":false, "calHighPicked": false}' data-role="datebox" id="datetime" name="datetime" type="date"/>
					</div>
					<div data-role="fieldcontain">
						<label for="timeselect">Time</label>
						<select name="timeselect" id="timeselect" data-native-menu="false">
							<option>Please choose a valid date first.</option>
						</select>
					</div>
				
					<script type="text/javascript">
						// Set up an object full of valid dates and times.
						var timeOptions = {
							'2001-01-03': ['10:00AM', '10:30AM', '11:00AM', '2:30PM', '3:00PM'],
							'2001-01-06': ['1:00PM', '1:30PM', '2:00PM', '4:00PM', '4:30PM'],
						};
						
						// Pull just the dates from the previous object
						var timeOptionDates = [];
						for ( var key in timeOptions ) {
							timeOptionDates.push(key);
						}
						
						// Update the datebox object with the highlighted dates
						function updateHighDates() {
							$('#datetime').datebox({'highDates': timeOptionDates});
							$('#datetime').trigger('datebox', {'method':'dorefresh'});
						}
						
						// Bind pageshow to update the highlighted dates - I split it, because if you use
						// ajax to somehow update the list of valid dates and times, it would need to be 
						// refreshed.
						$(document).bind('pageshow', function() {
							updateHighDates();
						});
						
						// Bind the datebox event, and...
						$('#datetime').live('datebox', function(event, payload) {
							// On the 'set' method...
							if ( payload.method === 'set' ) {
								// If it is *not* a valid date, reopen the datebox...
								if ( typeof timeOptions[payload.value] === "undefined" ) {
									$('#timeselect').html('<option>Please choose a valid date first.</option>');
									$('#timeselect').selectmenu('refresh');
									console.log('Reopening datebox in 300ms...');
									setTimeout("$('#datetime').trigger('datebox', {'method': 'open'});", 300);
								// OR, populate the select menu with the times, and open that instead.
								} else {
									var selectOptions = ['<option>Now, choose a time...</option>'];
									for ( var val in timeOptions[payload.value] ) {
										selectOptions.push('<option value="'+timeOptions[payload.value][val]+'">'+timeOptions[payload.value][val]+'</option>');
									}
									$('#timeselect').html(selectOptions.join());
									$('#timeselect').selectmenu('refresh');
									console.log('Opening time select in 300ms...');
									setTimeout("$('#timeselect').selectmenu('open');", 300);
								}
							}
						});
					</script>
					<a href="#sourceLINKSEL" data-rel="popup" data-role="button" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
                    <div data-role="popup" id="sourceLINKSEL" class="ui-content">	
					<strong>HTML</strong>
					<pre class="prettyprint">
&lt;div data-role="fieldcontain"&gt;
    &lt;label for="datetime"&gt;Date&lt;/label&gt;
    &lt;input data-options='{"mode":"calbox", "overrideDateFormat":"%Y-%m-%d", "defaultValue":[2001,0,1], "calHighPicked":false, "calHighToday":false, "calHighPicked": false}' data-role="datebox" id="datetime" name="datetime" type="date" /&gt;
&lt;div data-role="fieldcontain"&gt;
&lt;/div&gt;
    &lt;label for="timeselect"&gt;Time&lt;/label&gt;
    &lt;select name="timeselect" id="timeselect" data-native-menu="false"&gt;
        &lt;option&gt;Please choose a valid date first.&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</pre>

					<strong>jQuery</strong>
					<pre class="prettyprint">
var timeOptions = {
  '2001-01-03': ['10:00AM', '10:30AM', '11:00AM', '2:30PM', '3:00PM'],
  '2001-01-06': ['1:00PM', '1:30PM', '2:00PM', '4:00PM', '4:30PM'],
};

// Pull just the dates from the previous object
var timeOptionDates = [];
for ( var key in timeOptions ) {
  timeOptionDates.push(key);
}

// Update the datebox object with the highlighted dates
function updateHighDates() {
  $('#datetime').data('datebox').options.highDates = timeOptionDates;
  $('#datetime').trigger('datebox', {'method':'dorefresh'});
}

// Bind pageshow to update the highlighted dates - I split it, because if you use
// ajax to somehow update the list of valid dates and times, it would need to be 
// refreshed.
$(document).bind('pageshow', function() {
  updateHighDates();
});

// Bind the datebox event, and...
$('#datetime').live('datebox', function(event, payload) {
  // On the 'set' method...
  if ( payload.method === 'set' ) {
    // If it is *not* a valid date, reopen the datebox...
    if ( typeof timeOptions[payload.value] === "undefined" ) {
      $('#timeselect').html('&lt;option&gt;Please choose a valid date first.&lt;/option&gt;');
      $('#timeselect').selectmenu('refresh');
      console.log('Reopening datebox in 300ms...');
      setTimeout("$('#datetime').trigger('datebox', {'method': 'open'});", 300);
    // OR, populate the select menu with the times, and open that instead.
    } else {
      var selectOptions = ['&lt;option&gt;Now, choose a time...&lt;/option&gt;'];
      for ( var val in timeOptions[payload.value] ) {
        selectOptions.push('&lt;option value="'+timeOptions[payload.value][val]+'"&gt;'+timeOptions[payload.value][val]+'&lt;/option&gt;');
      }
      $('#timeselect').html(selectOptions.join());
      $('#timeselect').selectmenu('refresh');
      console.log('Opening time select in 300ms...');
      setTimeout("$('#timeselect').selectmenu('open');", 300);
    }
  }
});
</pre>
				</div>
				</div>
			</div>
		</div> 
		
	</div>
	<div data-role="footer" data-position="fixed">
	</div>
</div>
</html>
